<template>
	<view class="content ">
		<!--充值明细盒子-->
		<view class="topSec bg-select padding-top">
			<!-- <view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange"></text> 数字完成
				</view>
				<view class="action">
					<button class="cu-btn bg-green shadow" @tap="submitSteps">下一步</button>
				</view>
			</view> -->

			<view class="bg-white padding-tb tstepbox padding-left-lg">
				<view class="cu-steps text-green no-border">
					<view v-for="(item, index) in state.numList" class="cu-item"
						:class="(index < state.num-1 ? 'text-ngreen' :index==state.num-1?'text-bold':'')" :key="index">
						<!-- <text v-if="index + 1 <= state.num" style="position: fixed; color: #2AB05E; margin-top: 20rpx; margin-left: -10rpx; z-index: 10;">{{ index + 1 }}</text> -->

						<text class="cuIcon-title" :data-index="index + 1"></text>
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<view class="padlrbx p_rlt text-lg">
			<!--选择开卡金额-->
			<view class="solid-top R-topbox" v-show="state.num == 1">
				<view class="solid-bottom flex justify-between align-center R-stores">
					<view class="R-stitel">开卡门店</view>
					<!-- <input type="text" value="马王堆店" class="flex-sub R-stxt" disabled/> -->
					<view class="flex-sub R-stxt"
					:class="{'text-c9':!rechargeShop.name}"
						@click="mnavTo(`/pages/others/shopList/shopList?source=recharge&shopId=${rechargeShop.id}`)">
						{{ rechargeShop.name || '请选择充值门店' }}
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="solid-bottom flex align-center R-stores">
					<view class="R-stitel">推荐人</view>
					<input style="text-align: right;padding-right: 31rpx;" type="text" v-model="formSetPwd.remarks"
						maxlength="10" placeholder="请输入推荐人编号" placeholder-class="plshd" class="flex-sub R-money" />
				</view>
				<!--开通VIP会员的金额-->
				<view class="Rechargeamount padding-bottom-sm">
					<view class="A-titel">请选择开卡金额</view>
					<view class="flex align-center flex-wrap padding-left-sm listbx p_rlt">
						<view v-if="pageLoaded&&rechargeList.length <= 0" class="noData">暂无充值商品</view>
						<view v-else class="A-ambox" v-for="(item, index) in rechargeList" :key="index"
							@click="chooseMeal(index)" :class="{ on: typeClass === index}">
							<view class="amContentBox">
								<view :class="item.activityPrice ? 'thTip' : 'hide'">特惠</view>

								<view class="A-ammony text-cut">{{ item.activityPrice?item.activityPrice:item.nsell_price||'0' }}</view>
								<view :class="item.nsell_price ? 'A-amintegral' : 'hide'">{{ item.activityPrice&&item.sellerLabel?item.sellerLabel : '售价 ' + item.nsell_price + '元'}}</view>
							</view>
						</view>
					</view>
					<!-- <view class="A-titel ">提示：电子卡可以到颐而康任意门店进行消费</view> -->
					<view v-if="pageLoaded&&remarksList.length>0" class="adetbx margin-left-sm margin-top lh_z p_rlt" :class="{show:showD}">
						<view class="text-lg padding-bottom-sm">
							赠送明细
						</view>
						<view v-for="(item,index) in remarksList" :key="index" class="text-orange margin-top-xs">
							{{item||''}}
						</view>
						<!-- <view class="text-orange margin-top-xs">
							2、价值80元-VIP特价专区劵
						</view>
						<view class="text-orange margin-top-xs">
							3、价值100元-VIP特价专区劵
						</view>
						<view class="text-orange margin-top-xs">
							4、价值200元-VIP特价专区劵
						</view>
						<view class="text-orange margin-top-xs">
							5、价值300元-VIP特价专区劵
						</view> -->
						<view v-if="remarksList&&remarksList.length>2" class="morbox bg-white text-c6 text-sm flex align-center" @click="showD=!showD">
							<view class="flex-sub padding-left-sm">
								<text v-show="!showD">...</text>
							</view>
							<view
								class="flex flex--direction justify-center padding-tb padding-lr-lg align-center text-center">
								<view class="">
									展开
								</view>
								<view class="">
									<text :class="showD?'cuIcon-fold':'cuIcon-unfold'"></text>
								</view>
							</view>
						</view>
					</view>
					<view class="full_btn fixed" style="background: #FAFAFA;">
						<view class="mbtn" @click.stop="submitSteps">
							确定
						</view>
					</view>

				</view>
			</view>
			<!--设置卡密码-->
			<view class="solid-top R-topbox" v-show="state.num >1">
				<!--开通VIP会员的金额-->
				<view class="Rechargeamount padding-lr">
					<view class="password-title text-df">基本信息</view>

					<view class="cu-form-group">
						<view class="title">
							手机号
							<text class="text-nred">*</text>
						</view>
						<input placeholder="请输入绑定的手机号" @focus="cinputarr[0]=true" disabled placeholder-class="plshd" name="mobile" maxlength="11"
							v-model="formSetPwd.mobile"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">
							支付密码
							<text class="text-nred">*</text>
						</view>
						<input placeholder="请输入6位支付密码" @focus="cinputarr[1]=true" type="number" password="true" maxlength="6"
							placeholder-class="plshd" name="password" v-model="formSetPwd.password"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">
							确认支付密码
							<text class="text-nred">*</text>
						</view>
						<input placeholder="再次输入支付密码" @focus="cinputarr[2]=true" type="number" password="true" maxlength="6"
							placeholder-class="plshd" name="repeatPassWord"
							v-model="formSetPwd.repeatPassWord"></input>
					</view>

					<view class="cu-form-group">
						<view class="title">
							姓&#12288;名
						</view>
						<input placeholder="请输入您的姓名" @focus="cinputarr[3]=true" placeholder-class="plshd" maxlength="10" name="name"
							v-model="formSetPwd.name"></input>
					</view>

					<!-- <view class="cu-form-group">
						<view class="title">
							生&#12288;日
						</view>
						<picker class="datePicker" mode="date" :value="birthDate" :start="startDate" :end="endDate"
							@change="bindDateChange">
							<view class="uni-input">{{ birthDate }}</view>
						</picker>
					</view> -->

				<!-- 	<view class="text-c9 text-df padding-bottom-sm">提示：电子卡可以到颐而康任意门店/外卖平台/商城进行消费</view> -->

					
					<view class="full_btn fixed" style="background: #FAFAFA;">
						<view class="mbtn" @click.stop="submitOrder">
							提交
						</view>
					</view>
				</view>
			</view>
      
      <view class="mealis-con" v-if="orderType == 'meals'">
        <view class="flex justify-between con-w ul-con">
          <text>我同意自动约餐扣款</text>
          <switch color="#53A87F" style="transform:scale(0.9)" :checked="switchFlag"  @change="changeSwitch"/>
        </view>
        <view class="text-con">
          <text class="fcon-tixing"></text>
          <text>绑定成功后，约餐从此卡按实际金额自动扣款，卡内余额可以在颐而康连锁门店，颐而康精选商城，炖大侠进行消费。</text>
        </view>
      </view>
      <view v-else class="titip-text">充值金额可在颐而康门店、颐而康精选商城、炖大侠进行消费。</view>
			<!--完成-->
			<view class="justColor R-topbox" v-show="state.num === 4 && state.rechargeMoney">
				<view class="flex justify-center statuIco">
					<!-- <image class="img"></image> -->
					<text class="cuIcon-roundcheckfill"></text>
				</view>
				<view class="payRusult">开通成功</view>
				<view class="money">
					￥
					<text class="bigMoney">{{ state.rechargeMoney || '0.00' }}</text>
					<!-- <text>00</text> -->
				</view>
				<view class="noti">支付金额</view>
				<view class="noti" style="color: #ff0633;">{{state.groupErrorMsg}}</view>
				<button class="cu-btn confirm bg-white" @click="goBack">返回充值中心</button>
			</view>
		</view>

		<loading></loading>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, computed } from "vue";
	import { onLoad,onShow } from '@dcloudio/uni-app';
	import { queryShopRechargeList,submitOpenVip,checkOrderStatu,wx_Payment } from '@/api/vmeitime-http/index.js';
	import { mnavTo,showLoading, hideLoading } from '@/utils/helper';
	import mFormRule from "@/config/formRule";
	import mChecker from "@/utils/checker";
	import {takeUserInfo} from '@/utils/public';
	import mApi from '@/utils/mapi';
	import { useUserStore } from '@/stores/commonStore';
	import { useShopStore } from '@/stores/shopStore';
	const userStore = useUserStore();
	const shopStore = useShopStore();
	const showD = ref(false)
	
	let state = reactive({
		// dateTime: '1999-01-01',
		confirmNums1: 0,
		confirmNums: 0,
		isShowPayResult: false, //是否显示充值成功
		// rechargeList: [
		// 	{ amount: '1000', info: '售价1000', isActivity: false },
		// 	{ amount: '2000', info: '售价2000', isActivity: false },
		// 	{ amount: '3000', info: '售价3000', isActivity: false },
		// 	{ amount: '4000', info: '售价4000', isActivity: false },
		// 	{ amount: '5000', info: '售价4750', isActivity: true }
		// ], //充值信息
		// shopDetails: {}, //卖家信息
		// rechargeMoney: '', //充值成功显示金额
		// rechargeNum: 0, //充值金额
		// rechargeSku: '',//充值sku
		// memberDetails: {}, //会员缓存数据
		// checkIntervalid: '',
		groupErrorMsg: '',//集团错误信息
		numList: [
			{ name: '选择开卡金额' },
			{ name: '设置卡密码' },
			{ name: '支付' },
			{ name: '完成' }
		],
		// formSelect: {},
		// formSetPwd: {
		// 	mobile: '', //手机号码
		// 	password: '', //支付密码
		// 	repeatPassWord: '',//重复支付密码
		// 	name: '' //会员名称
		// },
		// rechargeSelName: '',
		num: 1,//产品数量
		// rechargeType: 851, //充值订单类型
		// wechatOpenId: '',//微信openId
		// initOpenId: true,//加载微信OpenId
		// canRepeatClick: true,
		// rechargeSelId: '',//充值门店id
		// isFromSelect: false,
		// transSelID: '',
		// recEventId: '',
		// defaultSelMember: '',
		wxPayed: false,
		isPaying: false,
		pay_no: '',
		// cardStatus: false
	})
	const cinputarr = ref([false,false,false,false])
	const rechargeShop = ref({
		name:'',
		id:''
	})
  const orderType = ref(null)
	onLoad((option:any) => {
    if(option){
      orderType.value = option.orderType
    }
		loadData()
	})
	const initParams =()=>{
		if(!rechargeShop.value.id||shopStore.rechargeShop.nmember_id){
			rechargeShop.value.name = shopStore.rechargeShop.vnick||shopStore.shopInfo.vnick||'';
			rechargeShop.value.id = shopStore.rechargeShop.nmember_id||shopStore.shopInfo.nmember_id||'';//shopStore.curSellerMemberId;
			shopStore.rechargeShop.nmember_id&&shopStore.setRechargeShop({})
		}
		if(!cinputarr[0]||!cinputarr[3]){
			formSetPwd.value.mobile = userStore.userInfo.vphone||'';
			formSetPwd.value.name = userStore.userInfo.vnick||'';
		}
		console.log('initParams',formSetPwd.value,userStore.userInfo)
		
	}
	onShow(() => { 
		takeUserInfo('check')
		pageLoaded.value&&loadData() 
	})
	const rechargeList = ref([]);//充值商品
	const remarksList = ref([]);//充值商品
	const typeClass = ref(0);
	const pageLoaded = ref(false);
	
	const rechargeMoney = ref(0);//充值金额-展示
	const rechargeNum = ref(0);//充值金额
	const rechargeSku = ref('');//充值商品sku
	// const remarks = ref('');//推荐人
	// const birthDate = ref('1999-01-01')
	const curOrderId = ref('');//订单号
	const checkNums = ref(0);//查询状态数
	const intervalid = ref(null);
	const canRepeatClick = ref(true);
	
	const formSetPwd = ref({
		mobile: '', //手机号码
		password: '', //支付密码
		repeatPassWord: '',//重复支付密码
		name: '' ,//会员名称
		remarks:''//推荐编号
	});
	const loadData= async()=>{
		initParams();
		try{
			let res = await queryShopRechargeList({nsell_member_id:rechargeShop.value.id,vtype: 8121,vstatus: 233 })
			pageLoaded.value = true;
			if(res.result&&res.object){
				rechargeList.value = res.object||[];
				let rmks = [];
				rechargeList.value.forEach((item,index)=>{
					item.remark?rmks.push((index + '、' + item.remark)):'';
				})
				remarksList.value = rmks;
				chooseMeal(0)
			}else{
				rezData()
				mApi.msg(res.shortMessage||'网络繁忙，请稍后。',res.code)
			}
		}catch(e){
			pageLoaded.value = true;
			console.error(e)
		}
	}
	
	const rezData = ()=>{
		rechargeNum.value = 0;
		rechargeSku.value = '';
		rechargeMoney.value = 0;
		typeClass.value = null;
	} 
	//生日
	// const bindDateChange= e => {
	// 	birthDate.value = e.target.value;
	// 	// birthDate.value = e.target.value.split('-').join('');
	// 	console.log(birthDate.value )
	// }
	// const getDate = type => {
	// 	const date = new Date();
	// 	let year = date.getFullYear();
	// 	let month = date.getMonth() + 1;
	// 	let day = date.getDate();
	// 	if (type === 'start') {
	// 		year = year - 60;
	// 	} else if (type === 'end') {
	// 		year = year + 2;
	// 	}
	// 	month = month > 9 ? month : '0' + month;
	// 	day = day > 9 ? day : '0' + day;
	// 	return `${year}-${month}-${day}`;
	// }
	// const startDate = computed(() => {
	// 	return getDate('start');
	// });
	// const endDate = computed(() => {
	// 	return getDate('end');
	// });
	//选择开卡金额
	const chooseMeal = index => {
		typeClass.value = index;
		let item = rechargeList.value[index]||{};
		rechargeNum.value = item.activityPrice?item.activityPrice||0:item.nsell_price||0;
		rechargeMoney.value = item.specs_name||item.nsell_price||0;
		rechargeSku.value = item.sku||'';
		// let goodsItem = state.rechargeList[index];
		// state.rechargeSku = goodsItem.sku || '';
		// state.rechargeNum = '';
	} //选择套餐
	
	
	//充值
	const submitSteps = () => {
		if (!rechargeNum.value||!rechargeSku.value) {
			mApi.msg('请选择开卡金额');
			return;
		}
		if(!rechargeShop.value.id){
			mApi.msg('请选择开卡门店');
			return;
		}
		state.num == 4 ? uni.redirectTo({url:'/pages/order/orderSuccess/orderSuccess?pageOrg=recharge'}) : state.num += 1;
	}
	const submitOrder = async() => {
		try{
			let checkParam = mChecker.check(
				formSetPwd.value,
				mFormRule.openCardRule
			);
			console.log('checkParam1.2',checkParam,formSetPwd.value,mChecker)
			
			if (!checkParam) {
				mApi.msg(mChecker.error.msg);
				return;
			}
			
			
			// state.num == 4 ? uni.redirectTo({url:'/pages/order/orderSuccess/orderSuccess?pageOrg=openVip'}) : state.num += 1;
			let formData = {
				sku: rechargeSku.value, //商品唯一规格ID
				buyNums: 1, //数量
				money: rechargeNum.value || '', //金额
				remarks:formSetPwd.value.remarks,//技师编号
				vtype: '851', //充值订单类型
				pointSellMemberId:rechargeShop.value.id || '', 
				// buyMemberId: that.memberDetails.memberId || '' ,//买家ID
				sellerMemberId:shopStore.curSellerMemberId || '',//shopStore.curSellerMemberId
				pswd:formSetPwd.value.password||'',
				pointName:formSetPwd.value.name||'',
				pointPhone:formSetPwd.value.mobile||''
				
			};
			
			if(!canRepeatClick.value){
				return
			}
			canRepeatClick.value = false;
			showLoading({ title: '提交...' })
			let res = await submitOpenVip(formData);
			if (res.result && res.object) {
				checkProStatus(res.object)
				// toRouter('/pages/order/orderSuccess/orderSuccess')
			} else {
				rezSubmitParams();
				mApi.msg(res.shortMessage || '网络繁忙，请稍后再试！');
			}
		}catch(e){
			rezSubmitParams();
			console.error(e)
		}
	}
	
	const checkProStatus = async id => {
		let res = await checkOrderStatu({ sessionid: id });
		if (res.state) {
			if (res.state === 'success') {
				curOrderId.value = id
				clearTimeout(intervalid.value);
				hideLoading();
				wxPay(id)
				
			} else if (res.state === 'fail') {
				rezSubmitParams();
				mApi.msg(res.messages || '提交失败，请稍后尝试');
			} else {
				checkNums.value++;
				console.log('checkProStatus次数：', checkNums.value);
				if (checkNums.value < 8) {
					intervalid.value = setTimeout(function () {
						checkProStatus(id);
					}, 2000);
				} else {
					rezSubmitParams();
					checkNums.value = 0;
					canRepeatClick.value = true;
					uni.showModal({
						title: '提示',
						content: res.messages || '提交失败，请稍后尝试',
						showCancel: false,
						confirmText: '知道了'
					})
				}
			}
		} else {
			rezSubmitParams()
			mApi.msg(res.messages || '提交失败，请稍后尝试');
		}
	}
	const wxPay = async (billId : any = '') => {
		let res = await wx_Payment({ merOrderId: billId });
		if (!res.result || !res.object) {
			mApi.msg(res.shortMessage || '支付失败');
			return
		}
		const nres = res.object || {};
		const { nonceStr, paySign, signType, timeStamp } = nres;
		hideLoading();
		wx.requestPayment({
			provider: 'wxpay',
			timeStamp: timeStamp || '',
			nonceStr: nonceStr || '',
			package: nres.package || '',
			signType: signType || '',
			paySign: paySign || '',
			success: function (res) {
				uni.redirectTo({url:`/pages/order/orderSuccess/orderSuccess?pageOrg=openVip&vbill_id=${billId}&payAmount=${rechargeNum.value}`})
				console.log('支付成功');
			},
			fail: function (err) {
				rezSubmitParams();
				console.log('支付失败', err);
			}
		});
	}
	const rezSubmitParams = ()=>{
		canRepeatClick.value = true;
		hideLoading();
	}
</script>

<style lang="scss">
  .mealis-con{
    // width: 675.054rpx;
    margin: 30rpx auto;
    .text-con{
      color: #999;
      text-align: justify;
      font-size: 28rpx;
      font-weight: 400;
      padding-top: 20rpx;
      .fcon-tixing{
        font-size: 24rpx;
        margin-right: 5rpx;
      }
    }
    .ul-con{
      padding: 44rpx 24rpx 34rpx;
      border-radius: 20rpx;
      background: #FFF;
      box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
    }
  }
  .titip-text{
    color: #999;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    letter-spacing: 0.28px;
    padding: 0 20rpx;
    margin-top: 34rpx;
  }
	.topSec {
		height: 390rpx;
	}

	page {
		background: #ffffff;
	}

	.padlrbx {
		padding: 20rpx 16rpx;
		top: -184rpx;
	}

	.R-topbox {
		border-radius: 16rpx;
		background: #FFF;
		box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
	}

	.bg-select {
		background: #70DEB1;
	}

	.tstepbox {
		width: calc(100% - 32rpx);
		margin-left: 16rpx;
		border-radius: 16rpx;
		background: #FFF;
		box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
	}

	.default-color {
		color: #666;
		opacity: 0.29;
	}

	.num-show {
		// background: $base-color;
		color: $base-color !important;
	}


	.cu-steps .cu-item .num::before,
	.cu-steps .cu-item .num::after {
		color: #ffffff;
	}

	.cu-form-group .title {
		min-width: 233rpx;
		// text-align-last: justify;
	}

	.cu-form-group {
		min-height: 114rpx;
		padding: 0;

		input {
			padding-left: 20rpx;
		}
	}
	.R-stores {
		width: 100%;
		height: 98rpx;

		.R-stitel {
			width: 164rpx;
			height: 26rpx;
			margin-left: 35rpx;
			color: #333333;
		}

		.R-stxt {
			font-size: 30rpx;
			font-family: PingFang-SC-Regular;
			font-weight: 400;
			color: #333333;
			text-align: right;
			padding-right: 31rpx;
		}
	}

	.Rechargeamount {
		width: 100%;

		.A-titel {
			padding-left: 31rpx;
			margin-top: 44rpx;
			font-size: 28rpx;
			font-family: PingFang-SC-Regular;
			font-weight: 400;
			color: #999999;
		}

		.password-title {
			display: flex;
			align-items: center;
			// background: #f6f6f6;
			height: 76rpx;
			// font-size: 24rpx;
			// font-family: HiraginoSansGB-W3;
			// font-weight: normal;
			// color: #888;
			line-height: 76rpx;
		}

		.A-ambox {
			width: 200rpx;
			height: 200rpx;
			margin-right: 38rpx;
			margin-top: 42rpx;
			text-align: center;
			border-radius: 16rpx;
			background: #F0F0F0;

			&:nth-child(3n) {
				margin-right: 0;
			}

			.amContentBox {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;
				overflow: hidden;
			}

			.thTip {
				width: 90rpx;
				font-size: 18rpx;
				line-height: 30rpx;
				color: #fff;
				text-align: center;
				// background: linear-gradient(90deg, rgba(40, 176, 91, 1) 0%, rgba(70, 183, 155, 1) 100%);
				background: linear-gradient(270deg, #FF7A00 0%, #F7B500 151.35%);
				position: absolute;
				left: -20rpx;
				top: 12rpx;
				transform: rotate(-45deg);
			}

			.A-ammony {
				font-size: 40rpx;
				font-family: PingFang-SC-Bold;
				font-weight: 500;
				color: #686868;
				overflow: hidden;

				//margin-top: 41rpx;
			}

			.A-amintegral {
				font-size: 24rpx;
				font-family: PingFang-SC-Regular;
				font-weight: 400;
				color: #aaaaaa;
				margin-top: 10rpx;
				// overflow: hidden; //超出一行文字自动隐藏
				// text-overflow: ellipsis;//文字隐藏后添加省略号
				// white-space: nowrap; //强制不换行
			}

			.img {
				width: 57rpx;
				height: 64rpx;
				position: absolute;
				left: 5rpx;
				top: 5rpx;
			}

			// &.solids::after {
			// 	border-width: 4rpx;
			// 	border-color: #EEEEEE;
			// }
		}

		.on {
			background: #53A87F;
			box-shadow: 0px 2px 18px 0px rgba(86, 191, 122, 0.30);

			// &.solids::after {
			// 	border-color: #8bcbba;
			// 	border-width: 4rpx;
			// }
			.A-ammony,
			.A-amintegral {
				color: #fff;
			}

		}
	}

	.adetbx {
		width: calc(100% - 40rpx);
		max-height: 260rpx;
		border-radius: 16rpx;
		background: #FFF;
		box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
		overflow: hidden;
		padding: 20rpx 0 60rpx 20rpx;

		&.show {
			max-height: fit-content;
		}
	}

	.morbox {
		position: absolute;
		width: 100%;
		height: 60rpx;
		right: 0;
		bottom: 0;
	}

	.hide {
		display: none;
	}

	.justColor {
		position: absolute;
		background-color: white;
		height: 100%;
		width: 100%;
	}

	.noData {
		line-height: 260rpx;
		width: 100%;
		font-size: 32rpx;
		color: #cccccc;
		text-align: center;
		margin-top: 50rpx;
	}

	.statuIco {
		font-size: 176rpx;
		text-align: center;
		color: #2ab05e;
		margin-top: 78rpx;
	}

	.payRusult {
		color: #666666;
		font-size: 32rpx;
		font-family: HiraginoSansGB-W3;
		text-align: center;
	}

	.money {
		color: #666666;
		font-size: 42rpx;
		font-family: HiraginoSansGB-W3;
		text-align: center;
		margin-top: 58rpx;
	}

	.confirm {
		height: 76rpx;
		color: #30b16a;
		font-family: HiraginoSansGB-W3;
		border: 1px solid #43b695;
		border-radius: 8rpx;
		width: 90%;
		font-size: 30rpx;
		margin-top: 22%;
		margin-left: 5%;
	}

	.bigMoney {
		font-size: 70rpx;
	}

	.noti {
		color: #666666;
		font-size: 32rpx;
		font-family: HiraginoSansGB-W3;
		text-align: center;
	}

	.datePicker {
		flex: 1;
		padding-left: 20rpx;
	}

	.justColor {
		position: absolute;
		background-color: white;
		height: 100%;
		width: 100%;
	}

	.plshd {
		color: #D5D5D5;
		font-size: 32rpx;
	}
	.listbx{
		min-height: 260rpx;
	}
</style>